<template>
  <div>
    <el-form ref="formRef" :model="formValue" label-position="top">
      <div
        class="supervision-box"
        v-for="(obj, objIndex) in formValue.group"
        :key="objIndex"
      >
        <div class="supervisionDialogTitle">
          <div class="blueBox"></div>
          {{ "编辑诉求" }}
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="月份："
              :prop="'group.' + objIndex + '.month'"
              :required="true"
            >
              <el-input v-model="obj.month" placeholder=" " />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="销售预算："
              :prop="'group.' + objIndex + '.salesBudget'"
              :required="true"
            >
              <el-input v-model="obj.salesBudget" placeholder=" ">
                <template #append><div>万元</div></template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="销售预测："
              :prop="'group.' + objIndex + '.salesPredict'"
              :rules="[
                {
                  required: true,
                  message: '请输入',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input v-model="obj.salesPredict" placeholder="请输入">
                <template #append><div>万元</div></template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <el-button @click="confirmClick">提交</el-button>
  </div>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref } from "vue";
const emits = defineEmits([]);
const props = defineProps({});
const state = reactive({});
let formValue = reactive({
  group: [{}, {}],
});
const formRef = ref(null);

const confirmClick = () => {
  formRef.value.validate((valid) => {
    if (valid) {
    }
  });
};
onBeforeMount(() => {});
onMounted(() => {});
defineExpose({ state });
</script>
<style lang="scss" scoped>
.blueBox {
  width: 3px;
  height: 22px;
  background: #436ff6;
  border-radius: 0px 2px 2px 0px;
  position: absolute;
  left: 0;
}
.supervision-box {
  background: #fff;
  padding: 20px;
  position: relative;
  border-radius: 10px;
  margin-bottom: 20px;
}

.supervisionDialogTitle {
  color: #1e222a;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}
</style>
